<template>
  <div class="compare">
    <div style="height: 100%;" v-loading="loading" element-loading-text="数据加载中...">
      <div class="header">
        <el-tag
          size="large"
          style="margin-right: 16px"
          v-for="ele in store.state.compareId"
          :key="ele.majorOutRelationId"
          closable
          @close="closeTag(ele)"
          :color="renderColor()"
        >{{ele.schoolName}}({{ele.majorName}})</el-tag>
      </div>
      <div class="result" v-if="compareArr.length > 0">
        <el-table ref="table" :row-style="selectedRowStyle" :data="compareArr" stripe border>
          <el-table-column prop="label"></el-table-column>
          <el-table-column v-for="(column, index) in header" :key="index">
            <template #default="{ row }">
              <template v-if="row.label==='专业标签'">
                <el-tag style="margin-right:10px" type="warning" v-for="ele in row.values[index]">{{ ele }}</el-tag>
              </template>
              <template v-else>
                {{ row.values[index]? row.values[index] : '-' }}
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else-if="!loading && compareArr.length === 0" class="no-data">
        暂无对比数据
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {useStore} from 'vuex'
import {majorCompare} from '@/api/api'
import {decrypt} from '@/utils/parseDate'
// 加载状态
const loading = ref(false)
// 获取store
const store = useStore()
const compareArr = ref([])
const header = ref([
  {
    label: '学校',
    prop: 'schoolName',
  },
  {
    label: '学院',
    prop: 'collegeName',
  },
  {
    label: '专业',
    prop: 'majorName',
  },
  {
    label: '最高分',
    prop: 'lqzgf',
  },
  {
    label: '最低分',
    prop: 'lqzdf',
  },
  {
    label: '录取人数',
    prop: 'lqzrs',
  },
  {
    label: '考试内容',
    prop: 'examContent'
  },
  {
    label: '专业标签',
    prop: 'majorTags'
  }
])

function getCompareData(){
  const compareId = store.state.compareId
  if(compareId.length === 2){
    majorCompare({
      majorOutRelationIdA: compareId[0].majorOutRelationId,
      majorOutRelationIdB: compareId[1].majorOutRelationId
    }).then(res=>{
      const result = JSON.parse(decrypt(res))
      if (result.status == 8) {
        store.commit("setTipsDialog", true);
      }
      if (result.status == 9) {
        store.commit("setNumberDialog", true);
      }
      if(result.status === 0){
        transposeTable([result.result.majorInfoA,result.result.majorInfoB])
      }
    })
  } else {
    loading.value = false
  }
}
// 第一行加粗显示
function selectedRowStyle({row,rowIndex}){
  if(rowIndex === 0){
    return {'font-weight': '700'} 
  }
}
// 关闭tag
function closeTag(val){
  const arr = store.state.compareId.filter(ele=>ele.majorOutRelationId!==val.majorOutRelationId)
  if(arr.length === 0){
    compareArr.value = []
  }
  store.commit('setCompareId',[...arr])
}
// 行列互换
function transposeTable(data){
  const transposedData = header.value.map(column=>({
    label: column.label,
    prop: column.prop,
    values: data.map(row => row[column.prop]),
  }))
  // 更新表格的数据和列定义
  header.value = data.map((row, index) =>{
    return ({
      label: '',
      prop: `column${index}`,
    })
  })
  compareArr.value = transposedData
  loading.value = false
}
function renderColor(){
  const r = Math.floor(Math.random()*266)
  const g = Math.floor(Math.random()*266)
  const b = Math.floor(Math.random()*266)
  return `rgba(${r},${g},${b},0.06)`
}
onMounted(()=>{
  loading.value = true
  getCompareData()
})
</script>
<style lang="less" scoped>
.compare{
  box-sizing: border-box;
  padding-top: 16px;
  height: 100%;
	width: 100%;
  .header{
    padding: 0 calc((100vw - 1200px)/2);
		min-width: 1200px;
  }
  .result{
    box-sizing: border-box;
    margin-top: 16px;
    padding: 0 calc((100vw - 1200px)/2);
		min-width: 1200px;
		height: calc(100% - 54px);
		overflow: auto;
    .el-table{
      :deep(.el-table__header-wrapper){
        display: none;
      }
    }
  }
  .no-data{
    box-sizing: border-box;
    padding: 16px calc((100vw - 1200px)/2) 0;
		min-width: 1200px;
		height: 100%;
		overflow: auto;
    text-align: center;
    font-size: 14px;
    color: #666;
  }
}
</style>
